<template>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <el-button size="mini" type="primary" @click="dialogFormVisible = true">添加</el-button>
            </el-col>

            <el-col :span="24" style="margin-top:20px;">
                  <el-table
                    :data="tableData"
                    style="width: 100%;"
                    row-key="id"
                    border
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                        align="center" 
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="address"
                        label="地址">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 添加账号 -->
        <el-dialog title="新增/编辑账号" width="80%" :visible.sync="dialogFormVisible">
            <el-form class="inlineForm" size="mini" :model="form" :rules="rules" inline label-position="left"  :label-width="formLabelWidth">
                <el-form-item label="父级" prop="pid" >
                  <el-select v-model="form.pid" placeholder="请选择父级">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="title" label="标题">
                    <el-input type="text" v-model="form.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item prop="route" label="路由名称">
                    <el-input type="text" v-model="form.route" placeholder="请输入路由"></el-input>
                </el-form-item>
                <el-form-item prop="route_url" label="路由路径">
                    <el-input type="text" v-model="form.route_url" placeholder="请输入路由路径"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary"  >保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name:'setting_power',
    data() {
        return {
            dialogFormVisible:false,
            formLabelWidth:"80px",
            form: {
                pid:'',
                title:'',
                route:'',
                route_url:''
            },
            rules:{
                pid:[ { required: true, message: '请选择父级', trigger: 'change' } ],
                title:[ { required: true, message: '请输入标题', trigger: 'blur' } ],
                route:[{  required:true , message:'请输入路由名称', trigger:'blur' }],
                route_url:[{  required:true , message:'请输入路由路径', trigger:'blur' }]
            },
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [{
                    id: 31,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                    id: 32,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
                }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
                }],
                tableData1: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                hasChildren: true
                }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
                }],
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                    id: 9,
                    label: '三级 1-1-1'
                    }, {
                    id: 10,
                    label: '三级 1-1-2'
                    }]
                }]
                }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
                }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }    
        }
    },
    methods:{
        handleClick(row) {
            console.log(row);
        },

        handleCheckChange(data, checked, indeterminate) {
            this.form.power = this.$refs.tree.getCheckedNodes()
        },
    }
}
</script>

<style lang="scss" scoped>
.content{
    .text-red{
        color:$red;
    }
    .inlineForm{
        .el-form-item{
            width: 100%;
            ::v-deep .el-input{
                width: 40vw;
            }
            ::v-deep .el-textarea{
                width: 40vw;
            }
        }
    }
}
</style>